<template>
  <div class="double-model-textarea-label-container">
    <span v-if="formItem.require" class="question-require">*</span>
    <div v-if="formItem.labelIndex" class="form-design-label-index">{{formItem.labelIndex}}.</div>
    <el-input 
      class="double-model-textarea double-model-textarea-label" 
      type="textarea"
      show-word-limit
      autosize
      :maxlength="100"
      resize="none"
      :placeholder="formItem.labelPlaceholder || '请输入题目标题'" 
      v-model="formItem.label"
      @focus=" (e) => e.target.classList.add('is-focus')"
      @blur="(e) => e.target.classList.remove('is-focus')"
      :readonly="props.readonly"
    >
    </el-input>
    <span v-if="formItem.referScore" class="form-design-label-score">{{ scoreDesc }}</span>
  </div>
</template>
<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  formItem: {
      type: Object,
  },
  readonly: {// 预设组件如考生姓名，身份证等标题不可编辑
    type: Boolean,
    default: false
  },
  isManual: {// 是否需要人工审核
    type: Boolean,
    default: false
  }
})
const formItem = computed(()=>{return props.formItem})
let scoreDesc = computed(() => {
  if(props.isManual){
    return `（${formItem.value.referScore}分 | 需人工评分）`
  }else{
    return `（${formItem.value.referScore}分）`
  }
})
</script>
<style scoped lang='scss'>
.double-model-textarea-label-container{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  // 标题索引
  .form-design-label-index{
    height: 40px;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
  .form-design-label-score{
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%, 50%);
    font-size: 16px;
    font-weight: 600;
    color: #1fbb7d;
  }
  .question-require{
    position: absolute;
    left: -10px;
    top: 11px;
    color: $failColor;
    font-size: 20px;
    font-weight: 600;
  }
  // 标题
  .double-model-textarea-label{
    ::v-deep(.el-textarea__inner){
      font-size: 16px;
      font-weight: 600;
      padding-left: 5px;
    }
  }
}
</style>